<template>
  <!-- 管理方案 -->
  <div class="scheme-manage">
    <div class="nav-section">
      <div class="nav-block">
        <img src="~@/assets/images/icon_home.png">
        <span class="title">方案设计</span>
        <span>管理方案</span>
      </div>
      <div class="stu-info" v-show="infos.userType == 3">
        <img src="~@/assets/images/icon_stu.png"/>
        <span>{{ neweditForm.name }}</span>
      </div>
    </div>

    <div class="manage-section">
      <div class="opt-box">
        <el-button type="primary" @click="goCreateFile()">建立档案</el-button>
        <el-button type="primary" @click="goStulocation()">定位专业</el-button>
        <el-button type="primary" @click="schemeFormDialog=true">新建方案</el-button>
<!--        <el-button type="primary" @click="goSubject()">选科方案</el-button>-->
        <el-button type="primary" @click="goPrint()">下载打印</el-button>
      </div>

      <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                style="width: 100%;">
        <el-table-column prop="programmeId" label="方案编号" min-width="40px">
          <template slot-scope="scope">
            <span>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="programmeName" label="方案名称">
        </el-table-column>
        <el-table-column prop="precedence" label="位次">
          <template slot-scope="scope">
            <span>{{stuPrecedence}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="分数">
          <template slot-scope="scope">
            <span>{{stuScore}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="majorType" label="科类" min-width="30px">
          <template slot-scope="scope">
            <span v-if="scope.row.majorType == 1">理科</span>
            <span v-if="scope.row.majorType == 2">文科</span>
            <span v-if="scope.row.majorType == 3">艺术理</span>
            <span v-if="scope.row.majorType == 4">艺术文</span>
          </template>
        </el-table-column>
        <el-table-column prop="batch" label="批次" min-width="50px">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="80px">
        </el-table-column>
        <el-table-column label="操作" min-width="140px">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="goPreview(scope.row)">预览修改</el-button>
            <el-button type="primary" plain size="small" @click="toPrint(scope.row)">下载打印</el-button>
            <el-button type="primary" plain size="small" @click="deleteProgramme(scope.$index,tableData,scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>

    <div v-if="user.userType == 3" class="right-btn-box">
      <el-button circle @click="goBack()">上一级</el-button>
    </div>


    <el-dialog title="新建方案" :visible.sync="schemeFormDialog" width="800px" :close-on-click-modal="false">
      <el-form ref="form" :model="newSchemeForm" label-width="80px" style="margin: auto;width: 420px;">
        <el-form-item label="*科类" prop="majorType" v-show="!infos.major">
          <el-select v-model="newSchemeForm.majorType" placeholder="请选择科类" style="width: 260px;" @change="setFormName()">
            <el-option label="理工" :value="1"></el-option>
            <el-option label="文史" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*批次" prop="region">
          <el-select v-model="newSchemeForm.region" placeholder="请选择活动区域" style="width: 260px;" @change="setFormName()">
            <el-option label="本科一批" value="本科一批"></el-option>
            <el-option label="本科二批" value="本科二批"></el-option>
            <el-option label="一批特殊" value="一批特殊"></el-option>
            <el-option label="二批特殊" value="二批特殊"></el-option>
            <el-option label="提前批A段" value="提前批A段"></el-option>
            <el-option label="提前批B段" value="提前批B段"></el-option>
            <el-option label="提前批C段" value="提前批C段"></el-option>
            <el-option label="提前批专科" value="提前批专科"></el-option>
            <el-option label="国家专项" value="国家专项"></el-option>
            <el-option label="地方专项" value="地方专项"></el-option>
            <el-option label="高职专科" value="高职专科"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveScheme()">立即创建</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { request } from "@/util/request"

export default {
  data() {
    return {
      loading: false,
      // 方案列表
      tableData: [],
      schemeList: [],
      // 新建方案弹窗
      schemeFormDialog: false,
      newSchemeForm: {
        majorType: 1,
        name: '理工本科一批',
        region: '本科一批',
      },
      // 用户信息
      user: null,
      infos: {},
      neweditForm: [],
      // 分数位次
      stuScore: '',
      stuPrecedence: '',
    }
  },
  methods: {
    // 新建方案-科类
    setFormName() {
      let major = "理工";
      if (this.newSchemeForm.majorType == 2) {
        major = "文史"
      }
      this.newSchemeForm.name = major + this.newSchemeForm.region
    },
    // 排序
    sortSchemeFn () {
      request({
        method: 'post',
        url: 'stuScheme/UpdateSort',
        data: {stuId: this.infos.id}
      }).then(res => {
        this.getProgramme();
      })
    },
    // 跳转选科方案
    goSubject () {
      this.$router.push({
        path: '/XkAdministration'
      })
    },
    // 上一级
    goBack() {
      this.$router.push({
        path: "/design"
      })
    },
    // 删除方案
    deleteProgramme(index, rows, row) {
      this.$confirm('确定删除该方案嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'get',
          url: 'stuScheme/deleteProgramme',
          params: {
            programmeId: row.programmeId,
            stuId: this.infos.id,
            batch: row.batch,
          }
        }).then(res => {
          if (res.code == 0 || res.code == 200) {
            rows.splice(index, 1);
            this.$message({
              message: '删除成功！',
              type: 'success'
            });
            this.sortSchemeFn();
          } else {
            this.$message({
              message: '删除失败~',
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 保存方案成功后调用
    update(row) {
      const programme = row;
      const user = sessionStorage.getItem("user");
      let stu = JSON.parse(user)
      if (stu.userType == 4) {
        this.$router.push({
          path: '/design/studentProgramme',
          query: {
            programme: JSON.stringify(programme)
          }
        })
      } else {
        this.$router.push({
          path: '/design/programme',
          query: {
            programme: JSON.stringify(programme)
          }
        })
      }

    },
    // 保存方案
    saveScheme() {
      if (this.infos.major) {
        this.newSchemeForm.majorType = this.infos.major
      }
      this.schemeList.push({
        "majorType": this.newSchemeForm.majorType,
        "batch": this.newSchemeForm.region,
        "stuId": this.infos.id,
      })
      console.log('==立即创建==', JSON.stringify(this.schemeList))
      // return
      request({
        method: 'post',
        url: 'stuScheme/saveScheme',
        data: this.schemeList
      }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.$message.success({
            message: '保存成功！',
            duration: 1000
          });
          this.programmeId = res.data.list[0].programmeId
          this.batch = this.newSchemeForm.region
          this.schemeFormDialog = false
          this.update(res.data.list)
        } else {
          this.$message.error({
            message: res.msg,
            duration: 1000
          });
        }
      })

    },
    // 下载打印
    toPrint(row) {
      const infos = row;
      if (infos.majorType === null) {
        infos.majorType = this.newSchemeForm.majorType;
      }
      localStorage.setItem('SingleScheme', JSON.stringify(infos))
      this.$router.push({
        name: 'designSinglePrint',
        params: {
          info: infos
        }
      })
    },
    // 预览修改
    goPreview (row) {
      const infos = row;
      if (infos.majorType === null) {
        infos.majorType = this.newSchemeForm.majorType;
      }
      localStorage.setItem('volunteer', JSON.stringify(infos))
      this.$router.push({
        name: 'designPreview',
        params: {
          info: infos
        }
      })
    },
    // 打印
    goPrint() {
      this.$router.push({
        path: '/design/print'
      })
    },
    // 获取方案列表
    getProgramme() {
      this.loading = true
      request({
        method: 'POST',
        url: 'stuScheme/getProgramme',
        params: {
          stuId: this.infos.id
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data
          this.stuScore = res.score,
          this.stuPrecedence = res.precedence
        }
        this.loading = false
      })
    },
    // 跳转建立档案
    goCreateFile() {
      localStorage.setItem('stu', JSON.stringify(this.infos))
      this.$router.push({
        path: '/design/stuarchives',
        params: {
          info: this.infos
        }
      })
    },
    // 跳转专业定位
    goStulocation() {
      localStorage.setItem('stu', JSON.stringify(this.infos))
      this.$router.push({
        path: '/design/stulocation',
        params: {
          info: this.infos
        }
      })
    },
    // 获取学生数据
    getStu() {
      if (this.user != null) {
        request({
          method: 'get',
          url: 'students/getStu',
          params: {
            Id: this.user.userId
          }
        }).then(res => {
          this.infos = res.data
          localStorage.setItem('stu', JSON.stringify(this.infos))
          this.getProgramme()
        })
      }
    }
  },
  created() {
    const user = sessionStorage.getItem("user");
    this.user = JSON.parse(user)
    if (this.user.userType == 3) { // 导师
      this.infos = JSON.parse(localStorage.getItem('stu'))
      this.getProgramme()
    } else if (this.user.userType == 4) { // 学生
      this.getStu()
    }
  }
}
</script>

<style lang="stylus">
.scheme-manage
  .el-table th.el-table__cell
    background-color: #f0f0f0;

  .right-btn-box
    .el-button
      width: 60px;
      height: 60px;
      padding: 0;
      text-align center
      background-color: green;
      color: white;
</style>
<style lang="stylus" scoped>
pageWidth = 1400px
.scheme-manage
  width: pageWidth;
  min-height: BodyMinHeight;
  margin: 0 auto;
  font-size: 16px;

  .nav-section
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    font-size: 18px;

    .nav-block
      flex 1
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .title
        width: 100px;

      img
        display: block;
        width: 18px;
        height: 18px;
        margin-right: 10px;

      i
        margin: 0 2px;

    .stu-info
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 166px;
      height: 40px;
      background: #FFF2E7;
      font-size: 18px;
      color: #333;

      img
        display: block;
        width: 18px;
        margin-right: 20px;

  .manage-section
    padding: 0 20px;
    margin-bottom: 40px;
    background: #fff;

    .opt-box
      padding 20px 0
      text-align right

  .right-btn-box
    position: fixed;
    top: 50%;
    right: 10px;
    margin-top: -30px;
    width: 60px;
    height: 60px;

</style>
